<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网试宝库|登录</title>
    <link rel="stylesheet" href="../css/login.css">
    </link>
    <script src="../js/login.js"></script>
</head>
<body>
    <div class="login_container">
        <!-- 顶部栏 -->
        <div class="login-topbox" style="z-index: 10;">
            <div style="display: flex;justify-content: center;align-items: center;">
                <div style="width: 64px; height: 64px;padding: 5px;">
                    <img src="../resource/img/IMG_1258.png" alt="" style="width: 60px; height: 60px;">
                </div>
                <div class="login-title">网试宝库 || 计算机考试平台</div>
            </div>

            <div>
                <button class="active tool" onclick="showLogin()">登录</button>
                <button class="tool" onclick="showRegister()">注册</button>
            </div>

        </div>
        <!-- 登录注册主体窗口 -->
        <div class="login-mainbox">
            <img src="../resource/img/图片6.jpg" alt="" style="z-index: 1;">
            <img src="../resource/img/jisuanj.jpg" alt="" style="z-index: 1;position: absolute; top: 260px; left: 230px;">

            <div class="login-container" style="z-index: 10;">
                <!-- 登录面板内容 -->
                <div class="login-card panel active" id="login-panel">
                    <h2>网试宝库||登录</h2>
                    <div class="tab">
                        <button class="tab-button active" onclick="switchTab('id')">身份证号登录</button>
                        <button class="tab-button" onclick="switchTab('email')">邮箱登录</button>
                    </div>
                    <div id="id" class="tab-content active">

                        <form>
                            <div class="input-group">
                                <label for="username">身份证号</label>
                                <input type="text" id="username" name="username" required>
                            </div>
                            <div class="input-group">
                                <label for="password">密码</label>
                                <input type="password" id="password" name="password" required>
                            </div>
                            <button type="submit" class="btn">登录</button>
                            <div class="register-link">
                                <p>还没有账号? <a onclick="showRegister()">点击这里注册</a></p>
                            </div>
                        </form>
                    </div>
                    <div id="email" class="tab-content">
                        <form>
                            <div class="input-group">
                                <label for="username">邮箱号</label>
                                <input type="text" id="username" name="username" required>
                            </div>
                            <div class="input-group">
                                <label for="code">验证码</label>
                                <div class="code-input-container">
                                    <input type="text" id="code" name="code" required>
                                    <button type="button" class="get-code-btn">获取验证码</button>
                                </div>
                            </div>
                            <button type="submit" class="btn">登录</button>
                            <div class="register-link">
                                <p>还没有账号? <a onclick="showLogin()">点击这里注册</a></p>
                            </div>
                        </form>
                    </div>
                </div>
                <div id="register-panel" class="login-card panel  " style="z-index: 10;">
                    <!-- 注册面板内容 -->
                    <h2>
                        网试宝库||注册
                    </h2>
                    <form>
                        <div class="input-group">
                            <label for="phone">电子邮箱</label>
                            <input type="text" id="phone" name="phone" placeholder="请输入电子邮箱" required>
                        </div>
                        <div class="input-group">
                            <label for="code">验证码</label>
                            <div class="code-input-container">
                                <input type="text" id="code" name="code" placeholder="请输入验证码" required>
                                <button type="button" class="get-code-btn">获取验证码</button>
                            </div>
                        </div>
                        <div class="input-group">
                            <label for="password">密码</label>
                            <input type="password" id="password" name="password" placeholder="请输入密码" required>
                        </div>
                        <div class="agreement">
                            <input type="checkbox" id="agreement" required style="width: 20px;">
                            <label for="agreement" style="font-size: 15px;">我已同意《用户协议》和《隐私协议》</label>
                        </div>
                        <button type="submit" class="btn">注册</button>
                    </form>
                    <div class="register-link">
                        <p>已有账号？<a href="#" onclick="showLogin()">立即登录</a></p>
                    </div>
                </div>
            </div>

        </div>
        <!-- 尾页 -->
        <footer class="footer" style="z-index: 10;">
            <p>Copyright © 2024-2025 网试宝库||计算机在线考试系统</p>
            <p>404 Not Found</p>
        </footer>
    </div>
</body>
</html>